<template>
  <el-container>
    <el-main style="background-color: #cceeff;height: 100%;width: 100%">
      <el-container style="height: 100%">
        <el-header>
          <el-row>
            <el-col :span="6">
              <el-input clearable class="grid-content ep-bg-purple-light" v-model="search" placeholder="请输入用户名"
                        size="large"/>
            </el-col>
            <el-col :span="6" :push="1">
              <el-button type="primary" @click="load" size="large">查询</el-button>
            </el-col>
          </el-row>
        </el-header>
        <el-main style="background-color: rgba(255,255,255,0.7);">
          <el-table border stripe :data="tableData" style="width: 100%" v-loading="loading">
            <el-table-column prop="id" label="提交编号"/>
            <el-table-column prop="submitName" label="用户名"/>
            <el-table-column prop="submitNick" label="昵称"/>
            <el-table-column prop="titleId" label="题目编号"/>
            <el-table-column prop="titleResult" label="结果">
              <template #default="scope">
                <div class="sub-body" style="color: #4db3ff" @click="titleIdDetail(scope.row)">
                  {{ scope.row.titleResult }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="mem" label="内存/KiB"/>
            <el-table-column prop="time" label="时间/ms"/>
            <el-table-column prop="languageId" label="语言"/>
            <el-table-column prop="titleTime" label="提交时间"/>
          </el-table>
        </el-main>
        <el-footer style="background-color: rgba(255,255,255,0.7);height: 45px">
          <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[5, 10, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </el-footer>
      </el-container>
    </el-main>
  </el-container>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Status",
  data() {
    return {
      search: '',
      currentPage: 1,
      pageSize: 10,
      total: 10,
      tableData: [],
      loading: true
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      this.loading = true;
      request.get("/submitRecord/status", {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
        this.loading = false
      })
    },
    titleIdDetail(val) {
      this.$router.push({path: '/statusDetails', query: {tId: val.id}});
    },
    handleSizeChange(pageSize) { //改变当前每页的个数触发
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) { //改变当前页码触发
      this.currentPage = pageNum
      this.load()
    }
  }
}
</script>

<style scoped>

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>